import BaseComponent from "../../app/baseComponent";

export class AUIRadioGroup extends BaseComponent {
    constructor(name) {
        super(name);
        this.props = {
            value: {
                required: true
            },
            inline: {
                type: Boolean,
                default: true
            },
            name: {
                type: String,
                require: true
            }
        };
        this.methods = {
            handleChange(e, checkbox) {
                var self = this;
                self.setSelectedIndex(parseFloat(e.target.getAttribute("data-index")));
            },
            setSelectedIndex(index) {
                var self = this;
                self.private_selected_index = index;
                self.$emit("input", self.getValue())
            },
            getValue() {
                var self = this;
                return self.private_radios[self.private_selected_index].value ;
            },
            setRadios(checkboxs) {
                var self = this;
                self.private_radios = checkboxs.map(function (v, index) {
                    if (v.selected) {
                        // v.__selected = v.selected;
                        self.private_selected_index = index;
                    }
                    return v;
                })
            }
        }
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
    <div class="${self._name}__item" v-for="(checkbox,index) in private_radios">
        <label :class="{'checkbox-inline': inline}">
            <input type="radio" 
                :name="name" @change="handleChange($event, checkbox)" :data-index="index" :checked="private_selected_index == index" :value="checkbox.value">
            <span v-html="checkbox.label"></span>
        </label>           
    </div>
</div>`;
    }
    _data() {
        var ret = {};
        ret.private_radios = [];
        ret.private_selected_index = -1;
        return ret;
    }
}

AUIRadioGroup.install = function () {
    window.AUICustomComponents.define("aui-radio-group", AUIRadioGroup);
};